<template>
	<view v-if="aavar">
		<!-- 头部 -->
		<view class="headbox">
			<view class="headlist" :class="Opacityvalue==1?'background_chart':'white_background'">
				<view class="user-header" @click="logindata">
					<view class="user-avatar">
						<view class="avatar-border"
							:style="Opacityvalue==1?'background-color: #ffffff;':'background-color:#737373;'">
							<view v-if="token" class="bg-image aratar-bg"
								:style="{ backgroundImage: 'url(' + bgImagepicture + ')' }">
							</view>
							<view v-else class="bg-image aratar-bg"
								:style="{ backgroundImage: 'url(' + bgImageUrl + ')' }">
							</view>
						</view>
					</view>
					<view class="clawsa bg-image" :class="Opacityvalue==1?'clawsa-image':'clawsa-image-art'"></view>
				</view>
				<view v-if="token" style="flex: 1;">
					<view style="color: #ffffff;font-size: 28rpx;">乐抓APP</view>
					<!-- <view v-if="Opacityvalue==1" class="logo-image_white bg-image"></view>
					<view v-else class="logo-image_black bg-image"></view> -->
				</view>
				<view v-else style="flex: 1;" @click="logindata">
					<view v-if="Opacityvalue==1" style="font-size: 35rpx;color: #ffffff;font-weight: bold;">登录领福利</view>
					<view v-else style="font-size: 35rpx;color: #000000;font-weight: bold;">登录领福利</view>
				</view>
				<view class="features-scope flex ac" style="margin-top: 5rpx;">
					<image @click="searcha" mode="widthFix" style="width: 56rpx;"
						:src="Opacityvalue==1?'../../static/icon/search.png':'../../static/icon/search-art.png'">
					</image>
					<image mode="widthFix" style="width: 56rpx;margin: 0 5rpx;"
						:src="Opacityvalue==1?'../../static/icon/customer-service.png':'../../static/icon/customer-service-art.png'">
					</image>
					<image @click="newsa" mode="widthFix" style="width: 56rpx;"
						:src="Opacityvalue==1?'../../static/icon/private-message.png':'../../static/icon/private-message-art.png'">
					</image>
				</view>
				<view @click="account" class="user-balance"
					:style="Opacityvalue==1?'background:#aa64d1;':'background:#555;'">
					<!-- <view class="balance-num">{{currency}}-{{swiperHeight}}</view> -->
					<view class="balance-num">{{currency}}</view>
					<image class="u-icon"
						src="https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Ft4hMsaYHyVdMWvK3KQv_PkxEMOI.gif">
					</image>
				</view>
			</view>
		</view>

		<!-- 轮播图1 -->
		<view class="swiperviewbox">
			<view class="banner-bg">
				<image
					src="https://duimianimg.loovee.com/style/img/h5/ukaka/ukaka_h51705493057877/img/ukaka_sy_bg1.6fff2c3.png">
				</image>
			</view>
			<swiper class="swiper-block" previous-margin="25rpx" next-margin="239rpx" :current="indexvalue"
				autoplay="true" circular="false" duration="500" interval="6888">
				<block v-for="(item,index) in carousel" :key="index">
					<swiper-item class="swiper-box">
						<view class="slide-view">
							<image mode="aspectFill" :src="item.picture" @click="chart(item)"></image>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>

		<!-- 轮播图2 -->
		<view v-if="token" class="lunbo">
			<view class="swiper-view">
				<swiper class="swiperfada" autoplay="true" circular="false" duration="500" interval="3888"
					@change="swiperChange">
					<block v-for="(item,index) in imgUrls" :key="index">
						<swiper-item>
							<image :src="item.imageurl" mode="aspectFill"></image>
						</swiper-item>
					</block>
				</swiper>
				<view class="dots">
					<block v-for="(item,unique) in imgUrls" :key="unique">
						<view class="dot" :class="unique == swiperCurrent?'active':''"></view>
					</block>
				</view>
			</view>
		</view>

		<!-- 分类 -->
		<view class="hot-catchbox bg-image">
			<scroll-view class="hot-catchview" scroll-x>
				<block v-for="(item,index) in typedata" :key="index">
					<view class="hot-catchlist" @click="tabdata(index,item.text)">
						<view class="clawsahot-catchview flex jc ac fc">
							<image mode="widthFix" :src="item.imageurl"></image>
							<view class="clawsahot-catchtext">{{item.text}}</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>

		<view class="spread-out"></view>

		<!-- 选择头部 -->
		<view class="tab-box">
			<v-tabs v-model="current" :tabs="tabs" @change="changeTab"></v-tabs>
		</view>

		<!-- 列表数据 -->
		<view>
			<swiper class="tab-content" @change="changeSwiper" :current="current" duration="0"
				:style="{ height: swiperHeight + 'px' }">
				<swiper-item v-for="(item,index) in tabs" :key="index">
					<scroll-view scroll-y="true" class="scoll-h">
						<block>
							<view class="listbox" :id="'content-wrap' + index">
								<view style="height: 10rpx;"></view>
								<view class="left">
									<block v-for="(item,index) in dataList" :key="index">
										<view v-if="index%2==0" class="item" @click.stop="detailsa(item)">
											<view class="item-img">
												<image mode="aspectFill" class="item-imgurl" :src="item.main_picture">
												</image>
												<image class="desc-bg" mode="widthFix"
													src="../../static/icon/fixed.png"></image>
											</view>
											<view class="item-title">{{item.name}}</view>
											<view class="item-platform jb">
												<view class="item-platform-left flex ac">
													<view class="flex ac">
														<text
															style="font-size: 28rpx;color:#FF411F;font-weight: 600;">{{item.currency}}</text>
														<text style="font-size: 23rpx;color:#FF411F;">金币</text>
													</view>
													<view class="flex ac"
														style="text-decoration:line-through;margin-left:10rpx;color:#B1B1B1;">
														<text style="font-size: 25rpx;">25</text>
														<text style="font-size: 20rpx;">金币</text>
													</view>
												</view>
												<!-- <view class="item-platform-right" style="background-color: #3CE67A;">3台/空闲中</view> -->
												<view class="item-platform-right" style="background-color: #FF5736;">
													3台/火爆中</view>
											</view>
										</view>
									</block>
								</view>
								<view class="right">
									<block v-for="(item,index) in dataList" :key="index">
										<view v-if="index%2==1" class="item" @click.stop="detailsa(item)">
											<view class="item-img">
												<image mode="aspectFill" class="item-imgurl" :src="item.main_picture">
												</image>
												<image class="desc-bg" mode="widthFix"
													src="../../static/icon/fixed.png"></image>
											</view>
											<view class="item-title">{{item.name}}</view>
											<view class="item-platform jb">
												<view class="item-platform-left flex ac">
													<view class="flex ac">
														<text
															style="font-size: 28rpx;color:#FF411F;font-weight: 600;">{{item.currency}}</text>
														<text style="font-size: 23rpx;color:#FF411F;">金币</text>
													</view>
													<view class="flex ac"
														style="text-decoration:line-through;margin-left:10rpx;color:#B1B1B1;">
														<text style="font-size: 25rpx;">25</text>
														<text style="font-size: 20rpx;">金币</text>
													</view>
												</view>
												<!-- <view class="item-platform-right" style="background-color: #3CE67A;">3台/空闲中</view> -->
												<view class="item-platform-right" style="background-color: #FF5736;">
													3台/火爆中</view>
											</view>
										</view>
									</block>
								</view>
								<!-- 上拉加载数据 -->
								<view class="loadmore">
									<view v-if="load" class="loading-more">
										<view class="more-bottom-line" style="display: flex;">
											<view class="more-loading"></view>
											<text class="more-lineTxt">正在加载...</text>
										</view>
									</view>
									<view v-if="nomore==false" class="more-finish">
										<view class="more-bottom-line">
											<view class="more-line"></view>
											<text class="more-lineTxt">暂无更多了~</text>
											<view class="more-line"></view>
										</view>
									</view>
								</view>
								<!-- 暂无数据 -->
								<view v-if="nodata==true" class="nodatabox">
									<image style="width: 332rpx;" mode="widthFix"
										src="https://duimianimg.loovee.com/style/jww/act/client/feedback/img/ww_wawaji_kongbaiye-8084012.png">
									</image>
									<view class="nodatatext">暂无数据</view>
								</view>
							</view>
						</block>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	export default {
		data() {
			return {
				indexvalue: 0,
				carousel: [],
				imgUrls: [{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fr7qqf3UiF664RI2jQkUMoODhsSJ.png',
						id: 1,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FvMRDj6m8qeaMZyAQ5u99lXfktMz.png',
						id: 2,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FkbJg5Bha-hL57ddRpZXU_D6ahEI.png',
						id: 3,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FgFuBPIphYRGGP-eJH_tq3c-FAge.png',
						id: 4,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FvGhgiWZRS2sN9z1lJZhfLr96OZi.png',
						id: 5,
					}
				],
				swiperCurrent: 0,
				typedata: [{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FvUUQV0mD_WxiPvjpJJ1hnipKjb-.png',
						text: '签到有奖',
						index: 1,
					},
					// {
					// 	imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FlgzLXfNGxUoG1zKClxTaeHLHNMr.png',
					// 	text: '玩法机',
					// 	index: 2,
					// },
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FkdkK0aI-Nu9NJeMRpCRoLxmpBui.gif',
						text: '充值特惠',
						index: 3,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjxlBmn7vuVL8cQU0TtOQZyG2Z29.png',
						text: '邀请奖励',
						index: 4,
					},
					// {
					// 	imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fmprk3w8F5nbq3ZMVcsOE7_SrXpg.png',
					// 	text: '兑换券商城',
					// 	index: 5,
					// },
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjGe0of95A7DPQWlLfhHLVpyofVt.png',
						text: '最强榜单',
						index: 5,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FsfKLRMjqUrGN3WUrQcWXK_aJVrl.png',
						text: '周卡月卡',
						index: 5,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FlMwd0Ex1cAsq0-L-NoUPfV34cPx.png',
						text: '我的娃娃',
						index: 5,
					},
				],
				current: 0,
				tabs: [],
				dataList: [],
				swiperHeight: 0, //滑块的高度(单位px)
				scrollTop: 0, //滑动参数
				Opacityvalue: 1,
				aavar: false,
				typeid: '',
				token: '',
				currency: 0, //金币
				bgImageUrl: 'https://duimianimg.loovee.com/style/ukk/act/img/logo2.png', //头像
				bgImagepicture: '',
				pageIndex: 1,
				load: true,
				nomore: true,
				nodata: false,
				hasMore: false,
			}
		},

		onLoad(e) {

			this.token = getApp().globalData.token

			if (getApp().globalData.token) {
				this.userinfodata()
			}

			this.carouseldata() //请求轮播图数据
			this.commoditytype() //获取商品分类导航栏数据
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop
			if (this.scrollTop > 200) {
				this.Opacityvalue = 0
			} else {
				this.Opacityvalue = 1
			}
		},

		// 上拉触底事件
		onReachBottom: function() {
			var that = this
			if (that.hasMore) {
				that.commoditydata() //调用函数
			}
		},

		methods: {
			//请求金币
			async userinfodata(e) {
				let apply = await request(`${getApp().globalData.http}user/get_user_info`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "POST", {
					token: getApp().globalData.token
				})
				if (apply.data.code == 0) {
					this.bgImagepicture = apply.data.data.picture
					this.currency = apply.data.data.currency
				} else {
					getApp().globalData.token = '' //保存token
					uni.setStorageSync('token', getApp().globalData.token)
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
				}
			},

			//跳转我的账户
			account(e) {
				if (getApp().globalData.token == '') {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} else {
					uni.navigateTo({
						url: '/pages/charge/charge'
					})
				}
			},

			//跳转详情
			detailsa(e) {
				var id = e.id
				if (getApp().globalData.token == '') {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} else {
					uni.navigateTo({
						url: '/pages/live/live?id='+id
					})
				}
			},

			//轮播图事件
			chart(e) {
				var id = e.id
				if (getApp().globalData.token == '') {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} else {
					this.slirecord(id) //记录点击轮播图点击次数
					uni.navigateTo({
						url: e.url
					})
				}
			},

			//记录点击轮播图点击次数
			async slirecord(id) {
				let apply = await request(`${getApp().globalData.http}slideshow_record`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					slideshow_id: id,
				})
			},

			//请求轮播图数据
			async carouseldata(e) {
				let apply = await request(`${getApp().globalData.http}get_slideshow`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "POST", {})
				if (apply.data.code == 0) {
					this.carousel = apply.data.data
				} else {
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
				}
			},

			//获取商品分类导航栏数据
			async commoditytype(e) {
				let apply = await request(`${getApp().globalData.http}commodity/get_commodity_type`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					cls: 1,
				})
				if (apply.data.code == 0) {
					this.tabs = apply.data.data
					this.aavar = true
					this.commoditydata()
				} else {
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
				}
			},

			//请求商品列表数据
			async commoditydata(e) {
				let apply = await request(`${getApp().globalData.http}commodity/user_list_commodity`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "POST", {
					page_num: this.pageIndex,
					page_size: 10,
					exchange: 1,
					type_id: this.typeid,
					name: '',
					hot: '',
					label: this.typeid == '' ? 1 : '',
					currency: '',
				})
				this.dataList = this.dataList.concat(apply.data.data)

				// 上拉加载数据
				if (apply.data.page_num == apply.data.total_num) {
					this.hasMore = false
				} else {
					this.hasMore = true
				}
				if (apply.data.data.length == 0) {
					this.nomore = true
					this.nodata = true
				}
				if (apply.data.data.length !== 0) {
					this.nomore = true
					this.nodata = false
				}

				if (this.hasMore) {
					this.pageIndex = this.pageIndex + 1
				} else {
					this.load = false
					if (apply.data.data.length == 0) {
						this.nomore = true
					} else {
						this.nomore = false
					}
				}

				//动态设置swiper的高度
				this.$nextTick(() => {
					this.setSwiperHeight();
				});

			},

			logindata(e) {
				if (getApp().globalData.token == '') {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} else {
					uni.reLaunch({
						url: '/pages/my/my'
					})
				}
			},

			tabdata(index,text) {
				if (getApp().globalData.token == '') {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} else {
					if (text == '签到有奖') {
						uni.navigateTo({
							url: '/pages/taskcenter/taskcenter'
						})
					}
					if (text == '玩法机') {
						uni.navigateTo({
							url: '/pages/playingmethod/playingmethod'
						})
					}
					if (text == '充值特惠') {
						uni.navigateTo({
							url: '/pages/charge/charge'
						})
					}
					if (text == '邀请奖励') {
						uni.navigateTo({
							url: '/pages/invite/invite'
						})
					}
					if (text == '兑换券商城') {
						uni.reLaunch({
							url: '/pages/funplay/funplay'
						})
					}
					if (text == '最强榜单') {
						uni.navigateTo({
							url: '/pages/ranking/ranking'
						})
					}
					if (text == '周卡月卡') {
						uni.navigateTo({
							url: '/pages/charge/charge'
						})
					}
					if (text == '我的娃娃') {
						uni.navigateTo({
							url: '/pages/doll/doll'
						})
					}
				}
			},

			//跳转搜索
			searcha(e) {
				if (getApp().globalData.token == '') {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} else {
					uni.navigateTo({
						url: '/pages/search/search'
					})
				}
			},

			//跳转信息中心
			newsa(e) {
				if (getApp().globalData.token == '') {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} else {
					uni.navigateTo({
						url: '/pages/informationlist/informationlist'
					})
				}
			},

			//手动切换题目
			changeSwiper(e) {
				var aa = this.tabs[e.detail.current]
				var id = aa.id
				var currentTabIndex = e.detail.current
				if (currentTabIndex !== this.current) {
					this.current = currentTabIndex
					// console.log("触发事件")
					this.pageIndex = 1
					this.dataList = []
					this.load = true
					this.nomore = true
					this.nodata = false
					this.hasMore = false
					if (this.current == 0) {
						this.typeid = ''
					} else {
						this.typeid = id
					}
					this.commoditydata()
				} else {
					// console.log("不触发事件")
				}

				//动态设置swiper的高度，使用nextTick延时设置
				// this.$nextTick(() => {
				// 	this.setSwiperHeight();
				// });

				// this.changeTab()

				// if (this.scrollTop > 600) {
				// 	uni.pageScrollTo({
				// 		scrollTop: 600,
				// 		duration: 0
				// 	})
				// } else {
				// 	uni.pageScrollTo({
				// 		scrollTop: this.scrollTop,
				// 		duration: 0
				// 	})
				// }

				// this.commoditydata()

			},

			//动态设置swiper的高度
			setSwiperHeight() {
				let element = "#content-wrap" + this.current;
				let query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec((res) => {
					if (res && res[0]) {
						this.swiperHeight = res[0].height;
					}
				});
			},

			swiperChange(e) {
				let current = e.detail.current
				this.swiperCurrent = current
			},

			changeTab(item) {
				this.pageIndex = 1
				this.dataList = []
				this.load = true
				this.nomore = true
				this.nodata = false
				this.hasMore = false

				if (item.name == '推荐') {
					this.typeid = ''
				} else {
					this.typeid = item.id
				}

				if (this.scrollTop > 600) {
					uni.pageScrollTo({
						scrollTop: 600,
						duration: 0
					})
				} else {
					uni.pageScrollTo({
						scrollTop: this.scrollTop,
						duration: 0
					})
				}

				this.commoditydata()
			}
		}
	}
</script>

<style lang="scss">
	@import url("home.css");
</style>